<!--
内容：统计报表
作者：段竟成
日期： 20170706
-->

<template>
    <div class="statisticalReport-statisticalCharts">
        <Row style="margin-bottom: 20px;">
            <Col span="24">
                <Card>
                    <div slot="title">工作成果
                        <div style="position: absolute;right: 15px;top: 5px;">
                            <Date-picker type="date" placeholder="选择日期" :value="recentYM['start']" format="yyyy年MM月" style="width: 200px"></Date-picker>至
                            <Date-picker type="date" placeholder="选择日期" :value="recentYM['end']" format="yyyy年MM月" style="width: 200px"></Date-picker>
                            <Button type="success">确认</Button>
                        </div>
                    </div>
                    <work-product></work-product>
                </Card>
            </Col>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="24">
                <Card>
                    <div slot="title">招聘进度
                        <div class="chart-operation">
                            <div class="filter-position">
                                <Select class="selection" v-model="model1" placeholder="这里是公司名称">
                                    <!--<Option :value="" :key=""></Option>-->
                                    <Tree :data="baseData"></Tree>
                                </Select>
                                <Checkbox v-model="childDepartmentFlag">包含子部门</Checkbox>
                            </div>
                            <Radio-group class="schedule-name" v-model="button1" type="button">
                                <Radio label="部门"></Radio>
                                <Radio label="职位"></Radio>
                            </Radio-group>
                        </div>
                    </div>
                    <recruit-schedule></recruit-schedule>
                </Card>
            </Col>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="24">
                <Card>
                    <div slot="title">变化趋势
                        <div style="position: absolute;right: 15px;top: 5px;">
                            <Date-picker type="date" placeholder="选择日期" :value="recentYMD['start']" format="yyyy年MM月dd日" style="width: 200px"></Date-picker>至
                            <Date-picker type="date" placeholder="选择日期" :value="recentYMD['end']" format="yyyy年MM月dd日" style="width: 200px"></Date-picker>
                            <Button type="success">确认</Button>
                        </div>
                    </div>
                    <variation-trend></variation-trend>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    //工作成果、招聘进度、变化趋势的图表
    import workProduct from './child/workProduct'
    import recruitSchedule from './child/recruitSchedule'
    import variationTrend from './child/variationTrend'

    //Charts 的默认配置
    const defaults = {};

    export default {
        name: 'hrCharts',
        props: {
            /**
             * options.type:图表类型
             * options.chartOpt:图表配置
             */
            options: {
                type: Object,
                default: function () {
                    return {};
                }
            },
        },
        data: function () {
            return {
                //招聘进度：部门、职位的选看
                button1: '部门',
                //是否包含子部门
                childDepartmentFlag: false,
                //招聘进度：下拉树
                baseData: [
                    {
                        expand: true,
                        title: 'parent 1',
                        children: [{
                            title: 'parent 1-0',
                            expand: true,
                            disabled: true,
                            children: [{
                                title: 'leaf',
                                disableCheckbox: true
                            }, {
                                title: 'leaf',
                            }]
                        }, {
                            title: 'parent 1-1',
                            expand: true,
                            checked: true,
                            children: [{
                                title: '<span style="color: red">leaf</span>',
                            }]
                        }]
                    }
                ]
            };
        },
        computed: {
            config: function () {
//                return _.defaultsDeep({}, this.options.chartOpt, defaults)
            },
            //工作成果按年月筛选：最近2个月
            recentYM: function () {
                let recentYM = [];
                recentYM.end = new Date();
                recentYM.start = new Date();
                recentYM.start.setTime(recentYM.start.getTime() - 3600 * 1000 * 24 * 60);
                return recentYM;
            },
            //变化趋势按年月日筛选：最近1个月
            recentYMD: function () {
                let recentYMD = [];
                recentYMD.end = new Date();
                recentYMD.start = new Date();
                recentYMD.start.setTime(recentYMD.start.getTime() - 3600 * 1000 * 24 * 30);
                return recentYMD;
            }
        },
        methods: {
        },
        components: {
            workProduct,
            recruitSchedule,
            variationTrend
        }
    }
</script>

<style lang="scss">
    .statisticalReport-statisticalCharts{
        .echarts{
            width: 100%;
            height: 100%;
        }
        .filter-position{
            display: inline-block;
            margin-top: 2px;
        }
        .chart-operation{
            height: 36px;
            margin-top: 14px;
        }
        .schedule-name{
            float: right;
            margin-top: 7px;
        }
        .ivu-radio-group-button .ivu-radio-wrapper{
            height: 22px;
            line-height: 22px;
            padding: 0 7px;
        }
        .selection{
            width: 150px;
            margin-right: 5px;
        }
    }
</style>
